<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <div id="box" title="hello" a="100">123</div>
    <p>
        <input id="inp" type="text">
    </p>
    <button class="add">添加评论</button>
    <button class="changeContent">改变内容</button>

    <ul class="list">
        <li>1 <button class="delete">删除1</button></li>
        <li>2 <button class="delete">删除2</button></li>
        <li>3 <button class="delete">删除3</button></li>
        <li>4 <button class="delete">删除4</button></li>
    </ul>

    <script>
        var deleteBtns = document.getElementsByClassName('delete')
        var list = document.getElementsByClassName('list')[0]
        for(var i=0;i<deleteBtns.length;i++){
            deleteBtns[i].onclick = function(){
                // 事件处理函数中的this,指代事件触发的元素
                console.log(this)
                list.removeChild(this.parentNode)
            }
        }

        // 目标：DOM操作(节点操作)
        // 第1步：获取节点
        var box = document.getElementById('box')
        var inp = document.getElementById('inp')
        var changeBtn = document.getElementsByClassName('changeContent')[0]
        var add = document.getElementsByClassName('add')[0]

        add.onclick = function(){
            var li = document.createElement('li')
            li.innerHTML = inp.value
            // 父节点追加子节点
            box.appendChild(li)
        }
        // add.onclick = function(){
        //     box.innerHTML += '<li>'+inp.value+'</li>'
        // }

        // 第2步：绑定事件
        changeBtn.onclick = function(){
            // 第3步：编写事件处理函数
            box.innerHTML += '<li>456</li>'
            // box.innerHTML = box.innerHTML+'456'
        }


        // 获取属性
        // console.log(box.id) //htmlDOM提供的语法形式
        // console.log(box.getAttribute('id')) //核心DOM提供的语法形式
        // console.log(box.a) //htmlDOM提供的语法形式
        // console.log(box.getAttribute('a')) //核心DOM提供的语法形式
    </script>
</body>
</html>